<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 300px;
            background-color: red;
            /*将容器转换为弹性盒子*/
            display: flex;
            /* 
                flex-start -> 默认值；主轴方向开始
                center -> 居中 
                flex-end -> 主轴的末尾 
                space-around -> 每一项两边的空间（外边距）相同（不算叠加空间）
                space-between -> 两端对齐
                space-evenly -> 均匀分布
            */
            justify-content: center;
            /*  flex-direction 控制主轴方向  默认水平从左到右
                row -> 默认值
                row-reverse -> 从右到左排列
                column -> 竖向排列 从上到下
                column-reverse -> 竖向排列 从下到上
            */
            flex-direction: row;
            /*  flex-wrap    当主轴上的内容超出主轴时，元素是否换行
                no-wrap    默认值 不换行
                wrap   换行
            */
            flex-wrap: wrap;
            /*  align-items 所有项在交叉轴上排列方式
                stretch -> 默认值 拉伸（子项没有高度/宽度时拉伸）
                flex-start -> 头对齐
                flex-end -> 尾对齐
                center -> 居中对齐
                baseline -> 基于文字基线（自己查找）
            */
            align-items: baseline;
            /*  align-content  控制交叉轴上的元素排列方式
                center -> 居中 
                flex-end -> 交叉轴的末尾 
                space-around -> 每一项两边的空间（外边距）相同（不算叠加空间）
                space-between -> 两端对齐
                space-evenly -> 均匀分布
            */
            align-content: center;
        }

        .box div {
            /* width: 100px; */
            height: 100px;
            background-color: pink;
            /* 当值不为0时，主轴上有空余空间，允许元素放大 */
            flex-grow: 1;
            /* 值为0不可以缩小，为1可以缩小 */
            flex-shrink: 1;
            /* 设置基础值（宽或高） */
            flex-basis: 100px;
            /* flex -> flex-grow,flex-shrink,flex-basis */
            flex: 1 0 100px;
            border: 1px solid yellow;
        }

        .box div:nth-child(2) {
            flex-grow: 2;
        }

        .two {
            /* order 控制所有项的顺序，默认是0，值越大越靠后，值越小越靠前 */
            order: 0;
        }

        /* 作业：让一个元素在父级中垂直水平居中 */
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
    </div>

    <!-- 两端固定，中间自适应 -->
    <style>
        .main {
            display: flex;
            height: 500px;
            border: 1px solid red;
            justify-content: space-between;
        }

        .left,
        .right {
            /* flex -> flex-grow,flex-shrink,flex-basis */
            flex: 0 0 100px;
            border: 1px dashed green;
        }

        .content {
            /* flex -> flex-grow,flex-shrink,flex-basis */
            flex: 1;
            /*  align-self 单独项排列方式
                stretch -> 默认值 拉伸（子项没有高度/宽度时拉伸）
                flex-start -> 头对齐
                flex-end -> 尾对齐
                center -> 居中对齐
                baseline -> 基于文字基线（自己查找）
            */
            align-self: center;
            background-color: aqua;
        }
    </style>
    <div class="main">
        <div class="left"></div>
        <!-- lorem   自动生成垃圾文字 -->
        <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum natus in vel, minima
            dolores nulla at aliquid architecto exercitationem quam odio repellendus enim quis eligendi impedit ab?
            Explicabo, iste nam?</div>
        <div class="right"></div>
    </div>
</body>

</html>